<template>
  <f7-page class="bg-color-white">
    <f7-navbar :title="$t('m.cod1')" back-link=" "></f7-navbar>
    <div class="content-padding margin-t20">
      <div class="c2c-order-details-header-box">
        <h1>{{details.trade.status | c2cOrderStatus}}</h1>
        <p>{{$t('m.cod2')}}:{{getPhone}}</p>
      </div>
      <div class="my-card no-padding">
        <div class="top-info">
          <p>{{$t('m.cod3')}} <span>{{$t('m.cod4')}}{{details.price}}cny</span></p>
          <p><strong>{{details.trade.total}}cny</strong> {{$t('m.cod5')}}{{details.num}}USDT</p>
        </div>
        <f7-list>
          <f7-list-item :title="formItems.pay_type | typeFilter" link :after="details.trade.status === '0'?$t('m.cod6'):''" :media="formItems.pay_type | typeImgFilter" @click="selectPayType"></f7-list-item>
        </f7-list>
        <div v-if="formItems.pay_type === '1'"><!--银行卡-->
          <div class="item-div pay-info">
            <h3>{{$t('m.cod7')}}</h3>
            <p>{{payInfo.bank}}</p>
          </div>
          <div class="card-tip">
            {{$t('m.cod8')}}
          </div>
          <div class="item-div pay-info">
            <h3>{{$t('m.cod9')}}</h3>
            <p>{{payInfo.name}}</p>
          </div>
          <div class="item-div pay-info">
            <h3>{{$t('m.cod10')}}</h3>
            <p>{{payInfo.number}}<f7-icon icon="iconfont icon-fuzhi" @click.native="copyText(payInfo.number)"></f7-icon></p>
          </div>
          <div class="item-div pay-info">
            <h3>{{$t('m.cod11')}}</h3>
            <p>{{payInfo.bank_address}}</p>
          </div>
        </div>
        <div v-else><!--银行卡-->
          <div class="item-div pay-info">
            <h3>{{formItems.pay_type | typeFilter}}{{$t('m.cod12')}}</h3>
            <p>{{payInfo.name}}</p>
          </div>
          <div class="item-div pay-info">
            <h3>{{formItems.pay_type | typeFilter}}{{$t('m.cod13')}}</h3>
            <p>{{payInfo.number}}</p>
          </div>
          <div class="item-div pay-info img-item">
            <h3>{{$t('m.cod14')}}</h3>
            <div>
              <img :src="payInfo.image" alt="">
            </div>
          </div>
        </div>
        <div class="item-div pay-info tips">
          <h3>{{$t('m.cod15')}}</h3>
          <p>{{details.content}}</p>
        </div>
        <!--<div class="item-div pay-info">
          <h3>参考号</h3>
          <p>789789<f7-icon icon="iconfont icon-fuzhi" @click.native="copyText('789789')"></f7-icon></p>
        </div>-->
      </div>

      <div class="my-card margin-t20 no-padding">
        <div class="top-info">
          <p>{{$t('m.cod16')}}</p>
          <p><strong>{{details.trade.total}}cny</strong> </p>
        </div>
        <div class="item-div pay-info">
          <h3>{{$t('m.cod17')}}</h3>
          <p>{{details.sell_user.nick?details.sell_user.nick:details.sell_user.username}}</p>
        </div>
        <div class="item-div pay-info">
          <h3>{{$t('m.cod18')}}</h3>
          <p>{{details.trade.price}}cny</p>
        </div>
        <div class="item-div pay-info">
          <h3>{{$t('m.ct15')}}</h3>
          <p>{{details.trade.num}}USDT</p>
        </div>
        <div class="item-div pay-info">
          <h3>{{$t('m.cod19')}}</h3>
          <p>{{$moment(details.trade.add_time * 1000).format('YYYY-MM-DD HH:mm:ss')}}</p>
        </div>
        <div class="item-div pay-info">
          <h3>{{$t('m.cod20')}}</h3>
          <p>{{details.trade.buy_addtime ==='0'?$t('m.cod34'):$moment(details.trade.buy_addtime * 1000).format('YYYY-MM-DD HH:mm:ss')}}</p>
        </div>
        <div class="item-div pay-info">
          <h3>{{$t('m.cod21')}}</h3>
          <p>{{details.trade.sell_addtime ==='0'?$t('m.cod34'):$moment(details.trade.sell_addtime * 1000).format('YYYY-MM-DD HH:mm:ss')}}</p>
        </div>
        <div class="item-div pay-info">
          <h3>{{$t('m.cod22')}}</h3>
          <p>{{details.trade.trade_no}}<f7-icon icon="iconfont icon-fuzhi" @click.native="copyText(details.trade.trade_no)"></f7-icon></p>
        </div>

        <div class="bottom-box">
          <template v-if="details.trade.status === '0' && details.trade.buy_uid === myUid">
            <f7-button fill color="gray" large @click="handleCancel">{{$t('m.cod23')}}</f7-button>
            <f7-button color="blue" fill large @click="handlePayed">{{$t('m.cod24')}} <span><f7-icon f7="clock_fill"></f7-icon>
            <van-count-down
                :time="getCountDownTime"
                :format="$t('m.cod25')"
              />
            </span></f7-button>
          </template>
          <template v-if="details.trade.status === '6' && details.trade.sell_uid === myUid">
            <f7-button fill color="red" large>{{$t('m.cod26')}}</f7-button>
            <f7-button color="blue" fill large @click="handleCollection">{{$t('m.cod27')}} <span><f7-icon f7="clock_fill"></f7-icon>
            <van-count-down
              :time="getCountDownTime"
              :format="$t('m.cod25')"
            />
            </span></f7-button>
          </template>
        </div>
      </div>
    </div>

    <f7-list class="van-hairline--top van-hairline--bottom">
      <f7-list-item>
        <p slot="title" class="user-box" v-if="details.sell_user.nick || details.sell_user.username">
          <span>{{details.sell_user.nick?details.sell_user.nick[0]:details.sell_user.username[0]}}</span>
          {{details.sell_user.nick?details.sell_user.nick:details.sell_user.username}}
        </p>
      </f7-list-item>
    </f7-list>

    <div class="transaction-tips content-padding">
      <h3><img src="../static/warning-icon.png" alt="">{{$t('m.cod28')}}</h3>
      <p>1.{{$t('m.cod29')}}</p>
      <p>2.{{$t('m.cod30')}}</p>
      <p>3.{{$t('m.cod31')}}</p>
    </div>

    <f7-actions :opened="payTypeSheet" @actions:closed="payTypeSheet = false">
      <f7-actions-group>
        <f7-actions-label>{{$t('m.cod32')}}</f7-actions-label>
        <f7-actions-button v-for="(item, index) in details.passPayTypes" :key="index" @click="togglePayType(item)">{{item | typeFilter}}</f7-actions-button>
      </f7-actions-group>
      <f7-actions-group>
        <f7-actions-button color="red">{{$t('m.cancel')}}</f7-actions-button>
      </f7-actions-group>
    </f7-actions>
  </f7-page>
</template>

<script>
  import { getMyOneTradeList, getOtherBankList, runCtcBuyStatus, runCtcSellStatus, delTrade } from "../api/find";
  import i18n from "../i18n";

  export default {
    name: "please-pay",
    data() {
      return {
        details: {
          trade: {},
          sell_user: {},
          buy_user: {}
        },
        payTypeSheet: false,
        formItems: {
          pay_type: '1'
        },
        payInfo: {},
        time: 1578906053000 - new Date().getTime()
      }
    },
    filters: {
      typeFilter(type) {
        switch (type) {
          case '1': return i18n.t('m.bank');
          case '2': return i18n.t('m.alipay');
          case '3': return i18n.t('m.wechat');
        }
      },
      typeImgFilter(type) {
        switch (type) {
          case '1': return require('../static/bank_card.png');
          case '2': return require('../static/alipay.png');
          case '3': return require('../static/wechat.png');
        }
      },
    },
    computed: {
      myUid() {
        return this.$store.getters.userInfo.user.uid;
      },
      contextItem() {
        return this.$f7route.context.nextParams;
      },
      getCountDownTime() {
        return this.$store.getters.config.config.c2c_chaoshi_time * 60 * 1000 + this.details.trade.add_time * 1000 - new Date().getTime()
      },
      getPhone() {
        return this.details.trade.buy_uid === this.myUid?this.details.sell_user.phone: this.details.buy_user.phone;
      }
    },
    mounted() {
      this.init();
    },
    methods: {
      init() {
        getMyOneTradeList(this.contextItem).then(res => {
          this.details = res.data;
          this.$set(this.details, 'passPayTypes', this.details.pay_type.split(','));
          this.togglePayType(this.details.passPayTypes[0]);
        })
      },
      selectPayType() {
        if (this.details.trade.status !=='0') return;
        this.payTypeSheet = true;
      },
      togglePayType(type) {
        this.formItems.pay_type = type;
        getOtherBankList({uid: this.details.uid, pay_type: type}).then(res => {
          this.payInfo = res.data;
        })
      },
      copyText(text) {
        this.$copyText(text).then((e) => {
          this.$toast(this.$t('m.copySuccess'));
        }, function (e) {
          console.log(e)
        })
      },
      handlePayed() {
        console.log('付款')
        this.$dialog.confirm({
          message: this.$t('m.cod35')
        }).then(() => {
          const obj = {
            ctc_id: this.details.ctc_id,
            trade_no: this.details.trade.trade_no,
            pay_type: this.formItems.pay_type,   // 选中的支付方式  1 2 3
          }
          runCtcBuyStatus(obj).then(() => {
            this.$f7router.back();
          })
          // on confirm
        }).catch(() => {
          // on cancel
        });
      },
      handleCollection() {
        this.$dialog.confirm({
          message: this.$t('m.cod36')
        }).then(() => {
          runCtcSellStatus({
            ctc_id: this.details.ctc_id,
            trade_no: this.details.trade.trade_no,
          }).then(() => {
            this.$f7router.back();
          })
          // on confirm
        }).catch(() => {
          // on cancel
        });
      },
      handleCancel() {
        this.$dialog.confirm({
          message: this.$t('m.cod37')
        }).then(() => {
          delTrade({
            ctc_id: this.details.ctc_id,
            trade_no: this.details.trade.trade_no,
          }).then(() => {
            this.$f7router.back();
          })
          // on confirm
        }).catch(() => {
          // on cancel
        });
      }
    }
  }
</script>

<style scoped lang="scss">

  .content-padding {
    .tips-p {
      color: $colorGrey;
    }
    .my-card {
      margin-top: $padding;
      box-shadow: 0 0 10px 0 rgba(0,0,0,.1);
    }
    .top-info{
      background: #F8F7FC;
      padding: $padding20;
      p {
        display: flex;
        justify-content: space-between;
        font-size: 26px;
        color: $colorGrey;
        align-items: center;
        &:first-child {
          margin-bottom: $padding20;
        }
        strong {
          font-size: 35px;
          color: $mainColor;
        }
      }
    }

    .item-div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: $padding20;
      &.tips {
        p {
          text-align: left;
        }
      }
      &.img-item {
        display: block;
        img {
          margin-top: $padding20;
        }
      }
      p {
        flex: 1;
        padding-left: $padding20;
        text-align: right;
        .iconfont {
          font-size: 40px;
          margin-left: 5px;
        }
      }
    }
    .card-tip {
      background: #F7F6FB;
      margin: 10px 30px;
      font-size: 25px;
      color: #8194DA;
      text-align: center;
      padding: 5px 0;
      border-radius: $radius;
    }
    .bottom-box {
      display: flex;
      padding: $padding20;
      .button {
        &:first-child {
          flex: 0.3;
          margin-right: $padding;
        }
        flex: 1;
        display: flex;
        align-items: center;
        span {
          display: flex;
          align-items: center;
          font-size: 25px;
          margin-left: 10px;
          .icon {
            margin-top: 5px;
            margin-right: 5px;
          }
          .van-count-down {
            color: #fff;
          }
        }
      }
    }
  }
  .transaction-tips {
    padding-bottom: $padding;
    h3 {
      display: flex;
      align-items: center;
      margin-bottom: $padding20;
      img {
        width: 30px;
        margin-right: 10px;
      }
    }
    p {
      color: $colorGrey;
    }
  }
  .user-box {
    span {
      display: inline-block;
      width: 50px;
      height: 50px;
      background: $colorGrey;
      color: white;
      text-align: center;
      line-height: 50px;
      border-radius: 50%;
      margin-right: 10px;
    }
  }
</style>
